<template>
  <div>
    <div class="saveButton">
      <Button size="small" type="primary" @click="saveParameter">保存</Button>
    </div>
    <Card :bordered="false" :dis-hover="true">
      <Form
        label-position="right"
        :label-width="150"
        :model="parameter"
        :rules="parameterValidate"
        ref="parameter"
      >
        <FormItem label="SMTP 主机" prop="value.EMAIL_HOST">
          <Input
            v-model="parameter.value.EMAIL_HOST"
            placeholder="请输入SMTP服务器主机"
          />
        </FormItem>
        <FormItem label="SMTP 端口" prop="value.EMAIL_PORT">
          <InputNumber
            :min="1"
            :step="1"
            style="width: 100%"
            v-model="parameter.value.EMAIL_PORT"
            placeholder="请输入SMTP服务器端口"
          />
        </FormItem>
        <FormItem label="SMTP 账号" prop="value.EMAIL_HOST_USER">
          <Input
            v-model="parameter.value.EMAIL_HOST_USER"
            placeholder="请输入SMTP账号"
          />
        </FormItem>
        <FormItem label="SMTP 密码" prop="value.EMAIL_HOST_PASSWORD">
          <Input
            type="password"
            password
            v-model="parameter.value.EMAIL_HOST_PASSWORD"
            placeholder="请输入SMTP密码"
          />
        </FormItem>
        <FormItem label="使用SSL协议" prop="value.EMAIL_USE_SSL">
          <i-switch
            true-color="#13ce66"
            false-color="#ff4949"
            v-model="parameter.value.EMAIL_USE_SSL"
          >
            <span slot="open">Y</span>
            <span slot="close">N</span>
          </i-switch>
        </FormItem>
        <FormItem label="发件人" prop="value.DEFAULT_FROM_EMAIL">
          <Input
            v-model="parameter.value.DEFAULT_FROM_EMAIL"
            placeholder="请输入发件人"
          />
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script>
import {
  getParameters,
  createParameter,
  updateParameter,
} from "@/api/HttpAutoTestService/parameter";
export default {
  name: "email",
  mounted() {
    getParameters({ key: "EMAIL" }).then((res) => {
      const data = res.data;
      let results = data.results;
      if (results.length > 0) {
        this.parameter.id = results[0].id;
        this.parameter.name = results[0].name;
        this.parameter.key = results[0].key;
        this.parameter.value = JSON.parse(results[0].value);
      }
    });
  },
  data() {
    return {
      parameter: {
        id: "",
        name: "邮件服务",
        key: "EMAIL",
        value: {
          EMAIL_HOST: "",
          EMAIL_PORT: 465,
          EMAIL_USE_SSL: true,
          EMAIL_HOST_USER: "",
          EMAIL_HOST_PASSWORD: "",
          DEFAULT_FROM_EMAIL: "",
        },
      },
      parameterValidate: {
        "value.EMAIL_HOST": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "value.EMAIL_PORT": [
          {
            required: true,
            message: "必填项",
            trigger: "blur",
            type: "number",
          },
        ],
        "value.EMAIL_HOST_USER": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "value.EMAIL_HOST_PASSWORD": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        "value.EMAIL_USE_SSL": [
          {
            required: true,
            message: "必填项",
            trigger: "change",
            type: "boolean",
          },
        ],
        "value.DEFAULT_FROM_EMAIL": [
          { required: true, message: "必填项", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    saveParameter() {
      let parameter = {
        id: this.parameter.id,
        name: this.parameter.name,
        key: this.parameter.key,
        value: JSON.stringify(this.parameter.value),
      };
      this.$refs["parameter"].validate((valid) => {
        if (valid) {
          if (parameter.id) {
            updateParameter(parameter).then((res) => {
              this.$Message.info("保存成功");
            });
          } else {
            delete parameter["id"];
            createParameter(parameter).then((res) => {
              if (res.status === 201) {
                this.parameter.id = res.data.id;
                this.$Message.info("保存成功");
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style scoped>
.saveButton {
  display: flex;
  justify-content: flex-end;
}
</style>
